<!doctype html>
<script src="../resources/text-based-repaint.js"></script>

<!-- The second two divs form a combined squashing layer. display:none'ing the first of them will resize the squashing layer. -->
<div style="width: 500px; height: 500px; will-change: transform;"></div>
<div style="position: absolute; top: 55px; left: 55px; width: 500px; height: 500px; background-color: lightblue"></div>
<div id="to-be-removed" style="position: absolute; top: 0px; left: 0px; width: 50px; height: 50px; background-color: lightgray"></div>

<script>
// This test checks that resizing a squashing layer such that the offset of content squashed into it relative to the squashing
// container causes a repaint of its bounds within the updated squashing layer geometry.
function repaintTest() {
    document.querySelector("#to-be-removed").style.display = 'none';
}

runRepaintAndPixelTest();
</script>